<!--
 * @Description: 500
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-05-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-05-07
-->

<script lang="ts" setup>
  import { useRouter } from 'vue-router'

  import { ErrorImgEnum } from '/@/enums/img/sysEnum'
  import { RouterPathEnum } from '/@/enums/routerEnum'

  const router = useRouter()

  /**
   * 返回首页（登录）
   */
  const goHome = () => router.push(RouterPathEnum.LOGIN)
</script>

<template>
  <div class="error">
    <img class="error-icon" :src="ErrorImgEnum.FORBIDDEN" />
    <div class="error-info">
      <h1 class="error-info-title">500</h1>
      <p class="error-info-text">抱歉，服务器出错了</p>
      <b-button class="error-info-button" type="primary" @click="goHome">返回首页</b-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .error {
    background: #fff;
    border-radius: 2px;
    height: 100%;
    min-height: 268px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .error-icon {
      width: 438px;
      height: 268px;
      object-fit: contain;
      margin-right: 120px;
    }

    .error-info {
      .error-info-title {
        margin: 0;
        font-size: 56px;
        font-weight: 500;
        color: #040714;
        line-height: 64px;
      }

      .error-info-text {
        margin: 8px 0 24px;
        font-size: 16px;
        font-weight: 400;
        color: #5c5e66;
        line-height: 24px;
      }

      .error-info-button {
        cursor: pointer;
      }
    }
  }
</style>
